<PageHeader as |p|>
  <p.levelLeft>
    <h1 class="title is-3">
      Secrets Engines
    </h1>
  </p.levelLeft>
</PageHeader>

<Toolbar>
  <ToolbarActions>
    <ToolbarLink
      @type="add"
      @params={{array 'vault.cluster.settings.mount-secret-backend'}}
    >
      Enable new engine
    </ToolbarLink>
  </ToolbarActions>
</Toolbar>

{{#each supportedBackends as |backend|}}
  {{#let (if (eq backend.engineType "kmip")
      "vault.cluster.secrets.backend.kmip.scopes"
      (if (eq backend.engineType "database")
      "vault.cluster.secrets.backend.overview"
      "vault.cluster.secrets.backend.list-root"
  )) as |backendLink|}}
    {{#linked-block
      backendLink
      backend.id
      class="list-item-row"
      data-test-secret-backend-row=backend.id
    }}
      <div class="level is-mobile">
        <div class="level-left">
          <div>
            <ToolTip @horizontalPosition="left" as |T|>
              <T.trigger>
                <Icon
                  @glyph={{or (if (eq backend.engineType "kmip") "secrets" backend.engineType) "secrets"}}
                  @size="l"
                  class="has-text-grey-light"
                />
              </T.trigger>
              <T.content @class="tool-tip">
                <div class="box">
                  {{backend.engineType}}
                </div>
              </T.content>
            </ToolTip>
            <LinkTo @route={{backendLink}} @model={{backend.id}} class="has-text-black has-text-weight-semibold" data-test-secret-path={{true}}>
              {{backend.path}}
            </LinkTo>
            <br />
            <code class="has-text-grey is-size-8">
            {{#if (eq backend.options.version 2)}}
              v2
            {{/if}}
            </code>
            <code class="has-text-grey is-size-8">
              {{backend.accessor}}
            </code>
          </div>
        </div>
        <div class="level-right is-flex is-paddingless is-marginless">
          <div class="level-item">
            <PopupMenu @name="engine-menu">
              <Confirm as |c|>
              <nav class="menu">
                <ul class="menu-list">
                  <li class="action">
                    <LinkTo @route="vault.cluster.secrets.backend.configuration" @model={{backend.id}}>
                      View configuration
                    </LinkTo>
                    </li>
                    {{#unless (eq backend.type "cubbyhole")}}
                    <li class="action">
                      <c.Message
                        @id={{backend.id}}
                        @triggerText="Disable"
                        @message="Any data in this engine will be permanently deleted."
                        @title="Disable engine?"
                        @confirmButtonText="Disable"
                        @onConfirm={{perform disableEngine backend}}
                        data-test-engine-disable="true"
                        />
                    </li>
                    {{/unless}}
                  {{#if item.updatePath.isPending}}
                    <li class="action">
                      <button disabled type="button" class="link button is-loading is-transparent">
                          loading
                        </button>
                      </li>
                  {{/if}}
                  </ul>
                </nav>
              </Confirm>
            </PopupMenu>
          </div>
        </div>
      </div>
    {{/linked-block}}
  {{/let}}
{{/each}}
{{#each unsupportedBackends as |backend|}}
  <div class="list-item-row" data-test-secret-backend-row={{backend.id}}>
    <div class="level is-mobile">
      <div class="level-left">
        <div>
          <div data-test-secret-path class="has-text-weight-semibold has-text-grey">
            <ToolTip @horizontalPosition="left" as |T|>
              <T.trigger>
                <Icon
                  @glyph={{or backend.engineType "secrets"}}
                  class="has-text-grey-light"
                />
              </T.trigger>
              <T.content @class="tool-tip">
                <div class="box">
                  {{backend.engineType}}
                </div>
              </T.content>
            </ToolTip>
            {{backend.path}}
          </div>
          <code class="has-text-grey is-size-8">
            {{backend.accessor}}
          </code>
        </div>
      </div>
      <div class="level-right is-flex is-paddingless is-marginless">
        <div class="level-item">
          <PopupMenu name="engine-menu">
            <Confirm as |c|>
              <nav class="menu">
                <ul class="menu-list">
                  <li class="action">
                    {{#link-to "vault.cluster.secrets.backend.configuration" backend.id data-test-engine-config}}
                      View configuration
                    {{/link-to}}
                  </li>
                  <li>
                    <c.Message
                      @id={{backend.id}}
                      @triggerText="Disable"
                      @message="Any data in this engine will be permanently deleted."
                      @title="Disable engine?"
                      @confirmButtonText="Disable"
                      @onConfirm={{perform disableEngine backend}}
                      data-test-engine-disable="true"
                      />
                  </li>
                </ul>
              </nav>
            </Confirm>
          </PopupMenu>
        </div>
      </div>
    </div>
  </div>
{{/each}}
